<script setup lang='ts'>
import { getChannelListAPI } from '@/apis';
import type { ChannelItem } from '@/types';
import { onMounted, ref } from 'vue';

const channelList = ref<ChannelItem[]>([])

const props = defineProps({
  channel_id: { type: Number, required: true },
})
const emit = defineEmits<{
  (e: 'update:channel_id', value: number): void
}>()
onMounted(async () => {
  const res = await getChannelListAPI()
  channelList.value = res.data.channels
  console.log(channelList.value);
})

</script>

<template>
  <el-select :model-value="props.channel_id" @change="emit('update:channel_id', $event)" clearable placeholder="请选择"
    style="width: 240px">
    <!-- 根据请求的频道列表来循环渲染 -->
    <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id" />
  </el-select>
</template>

<style scoped></style>
